<!--
 * @author: 十一
 * @since: 2024-08-27
 * Drawer.vue
 * @desc: new page
-->
<template>
  <a-drawer
    v-model:open="open"
    :destroyOnClose="true"
    width="500"
    class="custom-class"
    root-class-name="root-class-name"
    :title="props.drawerOptions.title"
    placement="right"
    @after-open-change="afterOpenChange"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="avatar_url" label="头像" name="avatar_url">
        <div v-if="props.drawerOptions.state == 2">
          <a-image :src="formState.avatar_url" style="width: 100px"></a-image>
        </div>
        <UploadFile v-model:file_url="formState.avatar_url" v-else />
      </a-form-item>
      <a-form-item ref="nickname" label="昵称" name="nickname">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.nickname }}
        </div>
        <a-input
          v-model:value="formState.nickname"
          placeholder="请输入昵称"
          v-else
        />
      </a-form-item>
      <!-- <a-form-item label="角色">
        <div v-if="props.drawerOptions.state == 2">
          {{ formatDictionaryItem("USER_TYPE", formState.user_type) }}
        </div>
        <a-select
          v-model:value="formState.user_type"
          placeholder="请选择角色"
          v-else
        >
          <a-select-option
            :value="item.code"
            v-for="item in roles"
            :key="item.id"
            >{{ item.title }}</a-select-option
          >
        </a-select>
      </a-form-item> -->
      <a-form-item label="角色">
        {{  props.drawerOptions.userRoleList }}
        <div v-if="props.drawerOptions.state == 2">
          <a-tag color="#D2691E" v-for="item in formState.userRoleList" :key="item.id">{{ item.name }}</a-tag>
        </div>
        <a-select
          v-model:value="formState.role_ids"
          placeholder="请选择角色"
          mode="multiple"
          v-else
        >
          <a-select-option
            :value="item.id"
            v-for="item in roleList"
            :key="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item ref="email" label="邮箱" name="email">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.email }}
        </div>
        <a-input
          v-model:value="formState.email"
          placeholder="请输入邮箱"
          v-else
        />
      </a-form-item>
      <a-form-item label="性别" name="gender">
        <div v-if="props.drawerOptions.state == 2">
          {{ formatDictionaryItem("GENDER", formState.gender) }}
        </div>
        <a-select
          v-model:value="formState.gender"
          placeholder="请选择性别"
          v-else
        >
          <a-select-option
            :value="item.code"
            v-for="item in genders"
            :key="item.id"
            >{{ item.title }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 20, offset: 4 }"
        v-if="props.drawerOptions.state != 2"
      >
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <!-- <a-button style="margin-left: 10px" @click="resetForm">重置</a-button> -->
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import UploadFile from "@/components/UploadFile/index.vue";
import { ref, watch } from "vue";
import { reactive, toRaw } from "vue";
import type { UnwrapRef } from "vue";
import type { Rule } from "ant-design-vue/es/form";
import { DataEcho } from "@/utils/dataEcho";
import { formatDictionaryList, formatDictionaryItem } from "@/utils/common";
import usePublicConfigStore from "@/stores/modules/public-config";
const publicConfigStore = usePublicConfigStore();
import { updateUserInfoApi, getRoleListApi } from "@/api/main";
import { message } from "ant-design-vue";
import emitter from "@/utils/mitt";
const open = ref<boolean>(false);
const roles = formatDictionaryList(publicConfigStore.dictionary, "USER_TYPE");
const genders = formatDictionaryList(publicConfigStore.dictionary, "GENDER");
//切换抽屉时动画结束后的回调
const afterOpenChange = (bool: boolean) => {
  if (bool) {
  } else {
    formRef.value.resetFields();
  }
};
interface FormState {
  id: string;
  role_ids: [] | null;
  userRoleList:[];
  avatar_url: string;
  user_type: string | number;
  nickname: string;
  email: string;
  gender: string | number;
}
const formRef = ref();
const labelCol = { span: 4 };
const wrapperCol = { span: 20 };
const formState: UnwrapRef<FormState> = reactive({
  id: "",
  role_ids: [],
  userRoleList: [],
  avatar_url: "",
  user_type: "",
  nickname: "",
  email: "",
  gender: "",
});
const rules: Record<string, Rule[]> = {
  //   username: [
  //     {
  //       required: true,
  //       message: "Please input Activity name",
  //       trigger: "change",
  //     },
  //     { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  //   ],
};

// 接收父组件的参数
const props = defineProps(["drawerOptions"]);

// 获取角色数据
const roleList = ref([]);
const getRoleList = () => {
  getRoleListApi().then((response: any) => {
    roleList.value = response.result.list;
  });
};

watch(
  () => props.drawerOptions,
  (newVal) => {
    DataEcho(formState, newVal.options);
  },
  {
    immediate: true,
  }
);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      const requsetParams = toRaw(formState);
      if (props.drawerOptions.state == 0) {
        // AddAdminUserListApi(requsetParams).then((response: any) => {
        //   console.log(response);
        //   if (response.status === 0) {
        //     message.success("添加成功");
        //     emitter.emit("handleSuccess");
        //     open.value = false;
        //   } else {
        //     message.error(response.msg);
        //   }
        // });
      } else {
        updateUserInfoApi(requsetParams).then((response: any) => {
          console.log(response);
          if (response.code == 200) {
            message.success("修改成功");
            emitter.emit("handleSuccess");
            open.value = false;
          } else {
            message.error(response.msg);
          }
        });
      }
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};

const resetForm = () => {
  formRef.value.resetFields();
};
//暴露给父组件
defineExpose({ open, getRoleList });
</script>

<style scoped></style>
